<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
            <el-form-item label="时间" prop="queryTime">
              <el-date-picker
                v-if="queryParams.queryType == 'day'"
                v-model="queryParams.queryTime"
                type="date"
                format="YYYY 年 MM 月 DD 日"
                value-format="YYYY-MM-DD"
                placeholder="请选择时间" />
              <el-date-picker
                v-else
                v-model="queryParams.queryTime"
                type="month"
                format="YYYY 年 MM 月"
                value-format="YYYY-MM-DD"
                placeholder="请选择时间" />
            </el-form-item>
            <el-form-item label="排序方式" prop="orderByType">
              <el-select
                v-model="queryParams.orderByType"
                placeholder="请选择排序方式">
                <el-option
                  label="实付金额排序"
                  value="payMoney" />
                <el-option
                  label="商品总金额排序"
                  value="totalMoney" />
                <el-option
                  label="总优惠金额排序"
                  value="subMoney" />
                <el-option
                  label="优惠券金额排序"
                  value="discountsMoney" />
                <el-option
                  label="满减金额排序"
                  value="fullReduceMoney" />
                <el-option
                  label="首单优惠金额排序"
                  value="firstCheapMoney" />
              </el-select>
            </el-form-item>
            <el-form-item label="用户玩家号" prop="userInviteCode">
              <el-input v-model="queryParams.userInviteCode" placeholder="请输入用户玩家号" clearable/>
            </el-form-item>
            <el-form-item label="用户昵称" prop="userNickName">
              <el-input v-model="queryParams.userNickName" placeholder="请输入用户昵称" clearable/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button type="warning" icon="Download" @click="handleExport">导出</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-tabs type="card" v-model="queryParams.queryType" @tab-change="handleQuery">
      <el-tab-pane label="日度排名" name="day" v-if="checkPermi(['shop:userPayList:day'])"/>
      <el-tab-pane label="月度排名" name="month" v-if="checkPermi(['shop:userPayList:month'])"/>
    </el-tabs>

    <el-card shadow="never">
      <el-table v-loading="loading" border :data="list">
        <el-table-column label="排名" align="center" prop="rank" />
        <el-table-column label="用户头像" align="center">
          <template #default="scope">
            <image-preview :src="scope.row.headPortrait" width="100px" height="100px"/>
          </template>
        </el-table-column>
        <el-table-column label="用户昵称" align="center" prop="nickName" />
        <el-table-column label="用户玩家号" align="center" prop="inviteCode" />
        <el-table-column label="商品总金额" align="center" prop="totalMoney" />
        <el-table-column label="优惠金额" align="center">
          <template #default="scope">
            <div>
              优惠券金额：{{scope.row.discountsMoney}}
            </div>
            <div>
              满减金额：{{scope.row.fullReduceMoney}}
            </div>
            <div>
              首单优惠金额：{{scope.row.firstOrderMoney}}
            </div>
            <div>
              <span style="font-weight: bold; color: lightseagreen">
                总优惠金额：{{scope.row.subMoney}}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实付金额" align="center">
          <template #default="scope">
            <span style="font-weight: bold; color: red">
                {{scope.row.payMoney}}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
  </div>
</template>

<script setup name="UserPay" lang="ts">
import { listUserPay } from '@/api/system/userPay/index';

import { UserPayQuery, UserPayVo } from '@/api/system/userPay/types';
import { parseTime } from '@/utils/ruoyi';
import { checkPermi } from '@/utils/permission';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const list = ref<UserPayVo[]>([]);
const total = ref(0);

const loading = ref(true);
const showSearch = ref(true);

const queryFormRef = ref<ElFormInstance>();

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    queryTime: parseTime(new Date(), '{y}-{m}-{d}'),
    orderByType: 'payMoney',
    userInviteCode: undefined,
    userNickName: undefined,
    queryType: 'day'
  },
});

const { queryParams } = toRefs(data);

/** 查询店铺单日订单统计数据列表 */
const getList = async () => {
  loading.value = true;
  const res = await listUserPay(queryParams.value).finally(loading.value = false);
  list.value = res.rows;
  total.value = res.total;
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('system/data/exportUserPayList', { ...queryParams.value }, queryParams.value.queryType == 'day'? queryParams.value.queryTime + `用户消费榜单.xlsx` : parseTime(queryParams.value.queryTime, '{y}-{m}') + `用户消费榜单.xlsx`);
};

onMounted(() => {
  getList();
});
</script>
